import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import { Link } from 'react-router-dom'
import { UserService } from '../../../../transfer/service/UserService'

function Login(props: any) {
    const [expend, setExpends] = useState(false)
    const [userId, setUserId] = useState(JSON.parse(localStorage.getItem('account') as any).id)
    const [avatar, setAvatar] = useState(false)

    useEffect(() => {
        new UserService().getProfile(JSON.parse(localStorage.getItem('account') as any).id).then(res => {
            setAvatar(res.data.data.profile.avatar)
        })
    })

    return (
        <div
            className={style.login}
            onClick={() => {
                setExpends(!expend)
            }}>
            <div className={style.img}>
                <img src={'http://localhost:3000/' + avatar} />
            </div>

            <div className={`${style.modal} ${expend ? 'expend' : ''}`}>
                <div className={style.triangle} />
                <div className={style.list}>
                    <div className={style.content}>
                        <Link to={'/profile/photos/' + userId} className={style.item}>
                            查看资料
                        </Link>
                        {/*<Link to={'#'} className={style.item}>*/}
                        {/*    状态*/}
                        {/*</Link>*/}
                        <Link to={'/account_setting/profile/' + userId} className={style.item}>
                            账号设置
                        </Link>
                    </div>
                    <div className={style.line} />
                    <Link
                        to={'/'}
                        className={style.logout__btn}
                        onClick={() => {
                            localStorage.removeItem('account')
                        }}>
                        退出
                    </Link>
                </div>
            </div>
        </div>
    )
}

function NoLogin() {
    return (
        <div className={style.no__login}>
            <Link to={'/account/login'} className={style.login__btn}>
                登录
            </Link>
            <Link to={'/account/join'} className={style.join__btn}>
                注册
            </Link>
        </div>
    )
}

export default function LoginStatusView() {
    return <div className={style.container}>{localStorage.getItem('account') ? <Login /> : <NoLogin />}</div>
}
